<template>
  <div>
    <el-dialog
      :before-close="handleClose"
      :title="status ? '编辑版本' : '新增版本'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="发版类型">
          <el-radio-group v-model="form.app_type" @change="appTypeChange">
            <el-radio :label="1">Android</el-radio>
            <el-radio :label="2">iOS</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.app_type === 1" label="选择应用">
          <el-radio-group v-model="form.android_application_type" @change="androidApplicationChange">
            <el-radio :label="1">回声</el-radio>
            <el-radio :label="2">回声</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.android_application_type || form.app_type === 2" label="版本号">
          <el-select v-model="form.management_id" placeholder="请选择版本号">
            <el-option v-for="(item, index) in versionNumberList" :key="index + item" :label="item.version"
                       :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="配置值">
          <div v-for="(item, index) in configurationValue" :key="index" class="flex justify-around h-12 align-middle">
            <el-input v-model="item.key" placeholder="请填写key" style="width: 30%;"></el-input>
            <el-input v-model="item.value" placeholder="请填写value" style="width: 30%"></el-input>
          </div>
        </el-form-item>
        <div class="add_key" @click="addKey">添加key</div>

        <el-form-item label="控制开关">
          <el-radio-group v-model="form.version_status">
            <el-radio :label="2">关</el-radio>
            <el-radio :label="1">开</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeClick">取 消</el-button>
        <el-button type="primary" @click="submitClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import { addAppVersionSetting, editAppVersion, getVersionNumber } from '../../../../api/config/listVersion'

export default {
  name: 'tableVersion',
  props: {
    dialogVisible: {
      type: Boolean,
      default() {
        return false
      }
    },
    status: {
      type: Boolean,
      default() {
        return false
      }
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      form: {
        // app类型 1 安卓 2ios
        app_type: null,
        // 安卓应用类型 1 回声 2回声
        android_application_type: null,
        // 版本号
        version: null,
        // ios控制开关 1 开 2关
        version_status: null,
        // 设置内容json
        setting_content: null,
        // app管理版本id 注：下拉选择好版本号返回的主键id
        management_id: null
      },
      configurationValue: [
        { key: null, value: null }
      ],
      versionNumberList: []
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('update:dialogVisible', false)
          this.$emit('update:status', false)
        })
        .catch(_ => {
        })
    },
    closeClick() {
      this.$emit('update:dialogVisible', false)
      this.$emit('update:status', false)
      this.$emit('update:detail', {})
    },
    addKey() {
      this.configurationValue.push({ key: null, value: null })
    },
    appTypeChange(val) {
      this.form.android_application_type = null
      if (val === 2) {
        this.getVersionNumber(this.form.app_type)
      }
    },
    androidApplicationChange() {
      this.getVersionNumber(this.form.app_type, this.form.android_application_type)
    },
    /**
     * submitClick
     * @desc 点击确认按钮
     */
    async submitClick() {
      // 处理 setting_content
      let content = {}
      this.configurationValue.map(item => {
        content[item.key] = item.value
      })
      this.form.setting_content = JSON.stringify([content])
      this.versionNumberList.map(item => {
        {
          if (item.id === this.form.management_id) {
            this.form.version = item.version
          }
        }
      })
      this.form.app_type === 2 ? this.form.android_application_type = 2 : ''
      // status true 编辑 false 新增
      let detail = {}
      if (this.status) {
        detail = await editAppVersion(this.detail.id, this.form)
      } else {
        detail = await addAppVersionSetting(this.form)
      }
      if (detail.data) {
        this.$message.success(this.status ? '编辑成功' : '新建成功')
        this.$emit('updateTable')
        this.$emit('update:dialogVisible', false)
        this.$emit('update:status', false)
        for (const detailKey in this.form) {
          this.form[detailKey] = null
        }
        this.configurationValue = []
      }
    },
    /**
     * getVersionNumber
     * @desc 获得版本号
     * @param app_type
     * @param android_application_type
     * @returns {Promise<void>}
     */
    async getVersionNumber(app_type = 1, android_application_type = 2) {
      const detail = await getVersionNumber({ app_type, android_application_type, perPage: 50, page: 1 })
      if (detail.code === 200) {
        this.versionNumberList = []
        detail.data.list.map(item => {
          this.versionNumberList.push({
            id: item.id,
            version: item.version
          })
        })
      }
    }
  },
  watch: {
    status: {
      handler(newVal) {
        if (newVal) {
          // 处理 setting_content configurationValue
          this.configurationValue = []
          JSON.parse(this.detail.setting_content).map(item => {
            for (const itemKey in item) {
              this.configurationValue.push({
                key: itemKey,
                value: item[itemKey]
              })
            }
          })
          this.form = Object.assign(this.form, this.detail)
        } else {
          for (const newValKey in this.form) {
            this.form[newValKey] = null
          }
          this.configurationValue = [{ key: null, value: null }]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.add_key {
  display      : flex;
  align-items  : center;
  margin-left  : 23%;
  padding-left : 4%;
  width        : 26%;
  height       : 45px;
  cursor       : pointer;
  box-sizing   : border-box;
  color        : #9294fa;
  border       : 1px solid #7193fa;
  //background-color: orange;
}

</style>
